<template>
  <Modal v-model="show" class="modal-password" title="重置密码" width=400>
        <Input v-model="pwd" placeholder="输入修改后的密码" type="password"></Input>
        <Input v-model="pwd_r" placeholder="重复密码" type="password"></Input>
        <div v-show="pwd_r && pwd && !pwdCheck" class="red message">两次输入结果不同，请重新输入</div>
        <div slot="footer" class="button-panel-button">
            <i-button @click="close">取消</i-button>
            <i-button @click="setPwd" :disabled="!pwdCheck" type="primary">确认</i-button>
        </div>
  </Modal>
</template>
<script>
import $ from "@/common/index";
import md5 from "@/login/md5";

export default {
  props: {
    value: {}
  },
  data() {
    return {
      submitPath: "service/{app}/account/password/update",
      show: false,
      pwd: null,
      pwd_r: null
    };
  },
  computed: {
    pwdCheck() {
      if (this.pwd !== this.pwd_r) {
        return false;
      }
      return true;
    }
  },
  watch: {
    value(v) {
      this.pwd = null;
      this.pwd_r = null;
      this.show = v;
    },
    show(v) {
      this.$emit("input", v);
    }
  },
  methods: {
    setPwd() {
      $.link(this.submitPath, {
        password: md5($.User.account_code, this.pwd)
      }).then(() => {
        this.close();
      });
    },
    close() {
      this.show = false;
    }
  }
};
</script>

<style lang="less">
.modal-password {
  .ivu-input-wrapper {
    margin-bottom: 18px;
  }
  .message {
    margin-top: -16px;
  }
  .ivu-modal-body {
    padding-bottom: 6px;
  }
}
</style>
